<template>
    <el-dialog width="900px"  :title="dialogNewAndEditTitles" :close-on-click-modal='false' :visible.sync="dialogNewAndEdit" @close="closeNewAndEdit('newEditForm')" append-to-body class="newEditContainer">
        <div class="newEditContent">
            <el-form label-width="150px" class="newStaffEdit" :model="form" :rules="newEditRules" ref="newEditForm" inline>
                <el-form-item label="职员名称" prop="saleName" >
                    <el-input type="text" v-model="form.saleName" clearable auto-complete="off" placeholder="请输入职员名称"></el-input>
                </el-form-item>
                <el-form-item label="职员类型" prop="isSale">
                    <el-select v-model="form.isSale" clearable placeholder="请选择职员类型">
                        <el-option label="业务员" value="1"></el-option>
                        <el-option label="非业务员" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职员账号" prop="account">
                     <tip content="默认密码为123456">
                    <el-input type="text" v-model="form.account" clearable auto-complete="off"  placeholder="账号初始密码为123456"></el-input>
                    </tip>
                </el-form-item>
                <el-form-item label="在职公司" prop="departmentId">
                     <remote-select
                        filterable
                        remote
                        :remote-method = "remoteMethod"
                        v-model="form.departmentId"
                        :loading="selectLoading"
                        :labelKey ="selectParams.department.selectName"
                        :valueKey ="selectParams.department.id"
                        :action = "selectParams.department.selectApi"
                        :actionQuery = "selectParams.department.actionQuery"
                        :changeQuery = "selectParams.department.changeQuery"
                        :option = "selectParams.department.options"
                        placeholder="请选择在职公司"
                        @change-data="choseDepartment"
                        @after-action = "getDepartmentList"
                        @clear-data = "departmentClearData"
                        ></remote-select >
                </el-form-item>
                <el-form-item label="在职部门" prop="sectionId">
                     <remote-select
                        v-model="form.sectionId"
                        :labelKey ="selectParams.section.selectName"
                        :valueKey ="selectParams.section.id"
                        :action = "selectParams.section.selectApi"
                        :actionQuery = "selectParams.section.actionQuery"
                        :changeQuery = "selectParams.section.changeQuery"
                        placeholder="请选择在职部门"
                        @change-data="choseSection"
                        @after-action = "getSectionList"
                         @clear-data = "sectionClearData"
                       ></remote-select >
                </el-form-item>
                <el-form-item label="职级" prop="class">
                    <remote-select
                        v-model="form.class"
                        :labelKey ="selectParams.classId.selectName"
                        :valueKey ="selectParams.classId.id"
                        :action = "selectParams.classId.selectApi"
                        :actionQuery = "selectParams.classId.actionQuery"
                         :changeQuery = "selectParams.classId.changeQuery"
                        placeholder="请选择职级"
                        @change-data="choseClass"
                       ></remote-select >
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <remote-select
                        v-model="form.roleId"
                        :labelKey ="selectParams.role.selectName"
                        :valueKey ="selectParams.role.id"
                        :action = "selectParams.role.selectApi"
                        :actionQuery = "selectParams.role.actionQuery"
                        :changeQuery = "selectParams.role.changeQuery"
                        placeholder="请选择角色"
                        @change-data="choseRole"
                       ></remote-select >
                </el-form-item>
                <el-form-item label="在职情况" prop="status">
                    <el-select v-model="form.status" clearable placeholder="请选择在职情况">
                        <el-option label="在职" value="0"></el-option>
                        <el-option label="停职" value="1"></el-option>
                        <el-option label="离职" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职日期" prop="joinTime">
                    <el-date-picker
                        v-model="form.joinTime"
                        align="right"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择入职日期"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile">
                    <el-input type="text" v-model="form.mobile" clearable auto-complete="off" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="审批权限" prop="isApproval" :class="{fullwidth:!showChose}">
                    <el-select v-model="form.isApproval" clearable placeholder="请选择审批权限" >
                        <el-option label="有审批权" value="1"></el-option>
                        <el-option label="无审批权" value="0"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="查看子公司职员" prop="showChildDepartment" v-if="showChose">
                    <el-select v-model="form.showChildDepartment" clearable placeholder="请选择">
                        <el-option label="允许查看" value="1"></el-option>
                        <el-option label="不允许查看" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证"  class="idCard" >
                    <div class="card-div">
                    <p>个人信息页</p>
                    <el-form-item prop="idCard" style="height: 100px;">
                        <pic-upload v-model="form.idCard" :value="form.idCard" content="点击上传" style="width:120px"></pic-upload>
                       <!--<img class="example-img" src="../../../assets/my_workStation/frontPic.png" />-->
                     </el-form-item>
                     </div>
                     <div class="card-div">
                    <p>国徽页</p>
                    <el-form-item prop="idCardSecond">
                        <pic-upload v-model="form.idCardSecond" :value="form.idCardSecond" content="点击上传" style="width:120px"></pic-upload>
                        <!--<img class="example-img" src="../../../assets/my_workStation/backPic.png" />-->
                    </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="个人头像" prop="headImage"  class="headImage">
                    <pic-upload v-model="form.headImage" :value="form.headImage" content="点击上传" style="width:245px"></pic-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeNewAndEdit('newEditForm')">取消</el-button>
                <el-button type="primary" @click="submitNewAndEdit('newEditForm')">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { addSale, getSaleInfo, getSectionList, getClassList, getRoleList } from '@/api/staff'
import { mapGetters } from 'vuex'
import { paramsShow } from '@/utils/index'
export default {
  data () {
    return {
      showChose: false,
      selectLoading: false,
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      selectParams: { // 选项接口参数
        department: {
          selectName: 'departmentName',
          id: 'id',
          selectApi: '/Home/Department/getDepartmentList',
          actionQuery: {
            type: 'option'
          },
          changeQuery: '',
          options: [],
          list: []
        },
        section: {
          selectName: 'sectionName',
          id: 'id',
          selectApi: '/Home/Section/getSectionList',
          actionQuery: {
            type: 'option',
            departmentId: ''
          },
          changeQuery: '',
          options: [],
          list: []
        },
        classId: {
          selectName: 'className',
          id: 'id',
          selectApi: '/Home/Class/getClassList',
          actionQuery: {
            type: 'option',
            departmentId: '',
            sectionId: ''
          },
          changeQuery: '',
          options: [],
          list: []
        },
        role: {
          selectName: 'roleName',
          id: 'id',
          selectApi: '/Home/Role/getRoleList',
          actionQuery: {
            type: 'option',
            departmentId: ''
          },
          changeQuery: '',
          options: [],
          list: []
        }
      },
      form: {
        isApproval: '0',
        saleName: '',
        account: '',
        isSale: '',
        departmentId: '',
        sectionId: '',
        class: '',
        status: '',
        joinTime: '',
        roleId: '',
        mobile: '',
        idCard: '',
        idCardSecond: '',
        headImage: '',
        showChildDepartment: '0'
      },
      newEditRules: {
        showChildDepartment: [{
          required: true,
          message: '请选择是否查看子公司职员',
          trigger: 'blur'
        }],
        saleName: [{
          required: true,
          message: '请输入职员名称',
          trigger: 'blur'
        }],
        isApproval: [{
          required: true,
          message: '请选择是否有审批权限',
          trigger: 'blur'
        }],
        account: [{
          required: true,
          message: '请选择职员类型',
          trigger: 'blur'
        }],
        isSale: [{
          required: true,
          message: '请输入职员账号',
          trigger: 'blur'
        }],
        departmentId: [{
          required: true,
          message: '请选择在职公司',
          trigger: 'blur'
        }],
        sectionId: [{
          required: true,
          message: '请选择在职部门',
          trigger: 'blur'
        }],
        class: [{
          required: true,
          message: '请选择职级',
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: '请选择在职情况',
          trigger: 'blur'
        }],
        joinTime: [{
          required: true,
          message: '请选择入职日期',
          trigger: 'blur'
        }],
        roleId: [{
          required: true,
          message: '请选择角色',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        },
        {
          min: 11,
          max: 11,
          message: '手机号必须是11位',
          trigger: 'blur'
        },
        {
          pattern: /^1\d{10}/,
          message: '手机号格式错误',
          trigger: 'blur'
        }
        ],
        idCard: [{
          required: false,
          message: '请上传身份证个人信息页',
          trigger: 'blur'
        }],
        idCardSecond: [{
          required: false,
          message: '请上传身份证国徽页',
          trigger: 'blur'
        }],
        headImage: [{
          required: false,
          message: '请上传个人头像',
          trigger: 'blur'
        }]
      },
      dialogNewAndEdit: false
    }
  },

  props: {
    dialogNewAndEditTitles: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    async openNewAndEdit (val) {
      this.dialogNewAndEdit = true
      if (val + '' !== '0') {
        this.form = await getSaleInfo({ id: val })
        this.form.isApproval = this.form.isApproval + ''
      }
    },
    // 关闭弹窗
    closeNewAndEdit (formName) {
      this.$refs[formName].resetFields()
      this.form.departmentId = ''
      this.form.sectionId = ''
      this.form.class = ''
      this.form.roleId = ''
      this.dialogNewAndEdit = false
    },

    // 选择公司
    getDepartmentList (msg) {
      this.selectParams.department.list = msg
    },
    departmentClearData () {
      this.form.sectionId = ''
      this.form.class = ''
      this.form.roleId = ''
    },
    async choseDepartment (value, msg) {
      var remote = ''
      if (msg) {
        if (msg.departmentName !== undefined) {
          this.remoteMethod(msg.departmentName)
        } else {
          this.remoteMethod(remote)
        }
      } else {
        this.remoteMethod(remote)
      }
      this.selectParams.section.actionQuery.departmentId = value
      this.selectParams.section.changeQuery = value
      this.selectParams.role.actionQuery.departmentId = value
      this.selectParams.role.changeQuery = value
      this.selectParams.classId.actionQuery.departmentId = value
      this.selectParams.classId.changeQuery = value
      var query = {
        type: 'option',
        departmentId: value
      }
      var sectionIdShow = await paramsShow(this.form.sectionId, getSectionList, query)
      var classIdShow = await paramsShow(this.form.roleId, getRoleList, query)
      var roleIdShow = await paramsShow(this.form.class, getClassList, query)
      if (sectionIdShow === 0) {
        this.form.sectionId = ''
      }
      if (classIdShow === 0) {
        this.form.class = ''
      }
      if (roleIdShow === 0) {
        this.form.roleId = ''
      }
    },
    remoteMethod (query) {
      if (query !== '') {
        this.selectLoading = true
        setTimeout(() => {
          this.selectLoading = false
          this.selectParams.department.options = this.selectParams.department.list.filter((item, index) => {
            return item.departmentName.indexOf(query) > -1
          })
        }, 200)
      } else if (query === '') {
        this.selectParams.department.options = this.selectParams.department.list
      }
    },
    // 选择部门
    getSectionList (msg) {
    },
    async choseSection (value, msg) {
      //    this.form.classId = ''
      this.selectParams.classId.actionQuery.departmentId = this.form.departmentId
      this.selectParams.classId.actionQuery.sectionId = value
      this.selectParams.classId.changeQuery = value
      this.selectParams.role.actionQuery.departmentId = this.form.departmentId
      this.selectParams.role.actionQuery.sectionId = value
      this.selectParams.role.changeQuery = value
      var query = {
        type: 'option',
        departmentId: this.form.departmentId,
        sectionId: value
      }
      var classIdShow = await paramsShow(this.form.roleId, getRoleList, query)
      var roleIdShow = await paramsShow(this.form.class, getClassList, query)
      if (classIdShow === 0) {
        this.form.class = ''
      }
      if (roleIdShow === 0) {
        this.form.roleId = ''
      }
    },
    sectionClearData () {
      this.form.class = ''
      this.form.roleId = ''
    },
    choseClass () {

    },
    choseRole () {

    },
    // 提交
    submitNewAndEdit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm(
            `确认保存？`,
            '温馨提示', {
              type: 'warning'
            }
          ).then(() => {
            this.fullScreenLoading(true)
            const form = Object.assign({}, this.form)
            if (this.dialogNewAndEditTitles !== '修改') {
              delete form.id
            }
            console.log(form)
            addSale(form).then(data => {
              this.fullScreenLoading(false)
              this.closeNewAndEdit(formName)
              this.$emit('refreshTables')
              this.$message.success('职员' + this.dialogNewAndEditTitles + '成功！')
            }).catch(() => {
              this.fullScreenLoading(false)
            })
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    if (this.userInfo.isShowChildDepartment + '' === '1') {
      this.showChose = true
    } else if (this.userInfo.isShowChildDepartment + '' === '0') {
      this.showChose = false
    }
  }

}
</script>

<style scoped>
    .newStaffEdit {
        padding-bottom: 20px;
        .el-form-item{
            width: 450px !important;
        }
    }
   .fullwidth{
       width: 100%;
   }
    .dialog-footer {
        text-align: center;
        padding-top: 10px;
    }
    .idCard p{
        margin: 0;
    }
</style>
